<template>
	<div class="box">
		<!-- 标题 -->
		<div class="title">
			<div class="title_fan">
				<span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
				自动充值
			</div>
			<!-- 图片信息 -->
			<div class="title_cen">
				<img src="../../../../assets/static/autoRcharge/c1.png">
				<div>
					<div class="title_cen_title">自动充值</div>
					<div>有了自动充值，您时时刻刻都有足够的金额。</div>
				</div>
			</div>
		</div>
		<!-- card -->
		<div class="card">
			<div>
				<div class="card_title card_color">
					<img src="../../../../assets/static/recharge/q4.png" alt="" />
					<div>当金额低于</div>
				</div>
				<div class="card_input"><input type="number" placeholder="输入金额"></div>
			</div>
			<div>
				<div class="card_title card_color">
					<img src="../../../../assets/static/recharge/q4.png" alt="" />
					<div>充值这个金额</div>
				</div>
				<div class="card_input card_selsct">
					<select name="1">
						<option value="1">sG65V</option>
					</select>
					<img src="../../../../assets/static/autoRcharge/i1.png">
				</div>
			</div>
			<div>
				<div class="card_title">
					<img src="../../../../assets/static/recharge/q4.png" alt="" />
					<div>通过以下充值</div>
				</div>
				<div class="color_card color_card_title">
					<div>添加支付卡</div>
					<img src="../../../../assets/static/autoRcharge/i3.png">
				</div>
				<div class="color_card color_card_size">
					<div>
						<span>Note:</span>
						Cash-ins made by credit cards can't
						be sent to contacts or bank accounts.
					</div>
					<img src="../../../../assets/static/autoRcharge/i2.png">
				</div>
			</div>
		</div>
		<div class="save">保存</div>
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	.box {

		/* 标题 */
		.title {
			background-image: linear-gradient(to bottom, #7ac91b 65%, #f5f5f5 0);
			font-weight: bold;

			.title_fan {
				color: #fff;
				font-size: 18px;
				padding: 15px;
				text-align: center;

				.el-icon-arrow-left {
					float: left;
					margin-top: 5px;
				}
			}
		}

		.title_cen {
			margin: 0 15px;
			padding: 15px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px #ccc;
			display: flex;
			font-size: 12px;
			font-weight: normal;
			color: #333;

			img {
				width: 65px;
				margin-right: 17px;
			}

			.title_cen_title {
				font-size: 17px;
				color: #62BF03;
				font-weight: bold;
			}
		}

		.card {
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px #ccc;
			margin: 15px;
			padding: 20px 10px;

			.card_title {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: bold;

				img {
					width: 2.5px;
					height: 12.5px;
				}

				>div {
					margin-left: 8px;
				}
			}

			.card_color {
				color: #65BD06;
			}

			.card_input {
				padding: 10px 12px;
				box-shadow: 0 5px 10px #ccc;
				margin: 14px 0;
				border-radius: 10px;
				font-size: 11px;

				input {
					width: 100%;
					border: none;
					outline: none;
					color: #999999;
				}

				input::-webkit-input-placeholder {
					color: #999;
				}
			}

			.card_selsct {
				display: flex;
				align-items: center;

				select {
					width: 100%;
					appearance: none;
					-moz-appearance: none;
					-webkit-appearance: none;
					border: none;
					outline: none;
					color: #999999;
				}

				select::-ms-expand {
					display: none;
				}
			}

			.color_card {
				background-color: rgba(109, 196, 14, 0.25);
				margin: 12px 0;
				display: flex;
				align-items: center;
				border-radius: 10px;
				font-weight: bold;
			}

			.color_card_title {
				padding: 23px;
				text-align: center;
				justify-content: center;
				color: #65BD06;
				font-size: 14px;

				img {
					width: 11px;
					height: 11px;
					margin-left: 4px;
				}
			}

			.color_card_size {
				font-size: 12px;
				padding: 18px 27px;

				span {
					color: #67C024;
				}

				img {
					width: 9px;
					height: 9px;
				}
			}
		}

		.save {
			margin: 100px 23px 23px;
			padding: 25px 0 35px 0;
			text-align: center;
			background-image: url(../../../../assets/static/autoRcharge/r1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}
	}
</style>
